const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {

  entry: {
    // test: './src/commonJs/test.component.js',
    app: '../common/src/main.ts'
  },

  output: {
    filename: 'script/[name].bundle.js',
    chunkFilename: 'script/[name].js',
    path: path.resolve(__dirname, '../../dist')
  },

  resolve: {
    extensions: ['.js', '.ts', '.json'],
    alias: {
      '@util': './common/util/',
      '@component': './common/component/',
      'vue$': 'vue/dist/vue.esm.js',
      '@ui': '../../ui/'
    }
  },

  plugins: [
    new HtmlWebpackPlugin({
      title: 'main',
      filename: 'view/app.html',
      inject: 'body',
      template: '../common/src/index.html',
      chunks: ['vendor', 'ui', 'app'],
      inject: true,
      hash: true
    }),
    new CleanWebpackPlugin(['dist']),

    new MiniCssExtractPlugin({
      filename: `styles/[name].css`
    })
  ],

  optimization: {
    splitChunks: {
      cacheGroups: {

        vendors: {
          chunks: "all",
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          minChunks: 1, //被不同entry引用次数(import),1次的话没必要提取
          maxInitialRequests: 5,
          minSize: 0,
          priority:100,
        },

        // commonJsUtil: {
        //   chunks: "all",
        //   test:/[\\/]src[\\/]commonJs[\\/]common[\\/]util/,
        //   name: "common-util",
        //   minChunks: 2,
        //   maxInitialRequests: 5,
        //   minSize: 0,
        //   priority: 1
        // },
        //
        // commonJsComponent: {
        //   chunks: "all",
        //   test:/[\\/]src[\\/]commonJs[\\/]common[\\/]component/,
        //   name: "common-component",
        //   minChunks: 2,
        //   maxInitialRequests: 5,
        //   minSize: 0,
        //   priority: 1
        // },

        ui: {
          chunks: "all",
          test: /[\\/]src[\\/]component[\\/]ui[\\/]/,
          name: "ui",
          minChunks: 1,
          maxInitialRequests: 5,
          minSize: 0,
          priority: 1
        }
      }
    }
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },

      {
        test: /\.ts$/,
        exclude: /node_modules/,
        enforce: 'pre',
        loader: 'tslint-loader'
      },

      {
        test: /\.(tsx|ts)$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },

      {
        test: /\.(css|less)$/,
        use: [
          MiniCssExtractPlugin.loader,
          // 'style-loader',
          'css-loader',
          'less-loader'
        ]
      },

      {
　　     test: /\.html$/,
　　     use: 'raw-loader',
      },

      {
        test: /\.(png|svg|gif|gif)$/,
        use: [
          'file-loader'
        ]
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
}
